<template>
  <!-- 客户案例 -->
  <div class="khcase">
    <h2>{{ lbata.theme }}</h2>
    <div class="khcase_warp_img">
      <img :src="lbata.imgUrl" alt="" />
    </div>

    <!-- 轮播 -->
    <div class="khcase_swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#6f7b8e">
        <van-swipe-item v-for="(item,i) in lbata.list" :key="i">
          <div class="khcase_swipe_item_img">
            <img :src="item.img" alt="">
          </div>
          <hr>
          <div class="khcase_swipe_item_mj">
            <h2>{{item.title}}</h2>
            <p>
              {{item.param}}
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>

export default {
  props: ["lbata"],
};
</script>

<style scoped>
.khcase {
  background: #f8f8f8;
  color: #1d2845;
  padding: 0 30px 15px 30px;
}
.khcase > h2 {
  font-size: 1.8em;
  text-align: center;
  padding: 25px 0;
}
.khcase_warp_img {
  text-align: center;
  margin-bottom: 10px;
}
.khcase_warp_img > img {
  width: 80%;
}
/* 轮播 */
.khcase_swipe{
  margin: 18px 0;
  padding: 0 15px;
  background: #fff;
  box-shadow: 0 2px 16px 0 rgb(102 102 102 / 20%);
  border-radius: 12px;
}
.khcase_swipe_item_img{
  width: 100%;
  padding: 20px 0;
}
.khcase_swipe_item_img>img{
  width: 30%;
  border-radius: 50%;
}
.khcase_swipe_item_mj>h2{
  padding: 14px 0;
  font-size: 1.3em;
}
.khcase_swipe_item_mj>p{
  color: #6f7b8e;
  font-size: 1.2em;
  padding-bottom: 30px;
}

</style>